import React, { Component, PropTypes } from 'react';

import {BottomNavigation, BottomNavigationItem} from 'material-ui/BottomNavigation';
import Paper from 'material-ui/Paper';
import ActionHome from 'material-ui/svg-icons/action/home';

/**
 * app 底部导航
 *
 * @param selectedIndex 选择第几个默认第一个
 * @param select 选择的时候回调
 * @returns {XML}
 * @constructor
 */
const AppBottomNavigation = ({ selectedIndex = 0, select = () => {}, ...other }) => {

  return (
    <Paper zDepth={1} {...other}>
      <BottomNavigation selectedIndex={selectedIndex}>
        <BottomNavigationItem
          label="首页"
          icon={<ActionHome />}
          onTouchTap={() => select(0)}
        />
        <BottomNavigationItem
          label="发现"
          icon={<ActionHome />}
          onTouchTap={() => select(1)}
        />
      </BottomNavigation>
    </Paper>
  );
};

AppBottomNavigation.propTypes = {
  selectedIndex: PropTypes.number,
  select: PropTypes.func,
};

export default AppBottomNavigation;
